<template>
  <div>
    <div>vuex测试</div>
    <div>原型写法：{{ $store.state.user.name }}</div>
    <div>mapGetters写法：{{ name }}</div>
    <div>mapStates写法：{{ stateName }}</div>
    <button @click="handleChangeName">标签修改姓名</button>
    <button @click="handleChangeNameHelp">辅助函数修改姓名</button>
    <button @click="handleChangeNameAsyc">标签异步改变姓名</button>
    <button @click="handleChangeNameHelpAsyc">标签异步改变姓名</button>
  </div>
</template>

<script>
import { mapGetters, createNamespacedHelpers } from "vuex";
const { mapMutations, mapState, mapActions } = createNamespacedHelpers("user");
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["name"]),
    ...mapState({
      stateName: (state) => state.name,
    }),
  },
  created() {},
  methods: {
    ...mapActions(["EditNameAsyc"]),
    ...mapMutations(["EditName"]),
    handleChangeName() {
      this.$store.commit("user/EditName", "中忍鸣人");
    },
    handleChangeNameHelp() {
      this.EditName("上忍鸣人");
    },
    handleChangeNameAsyc() {
      this.$store.dispatch("user/EditNameAsyc", "漩涡鸣人仙人模式");
    },
    handleChangeNameHelpAsyc() {
      this.EditNameAsyc("火影鸣人");
    },
  },
};
</script>
<style lang="less" scoped></style>
